<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>01_宏队列与微队列.html</title>
</head>

<body>
    <script>
        /* 
            // 代码一，执行顺序

            主线程
            onResolved1 1
            onResolved1 2
            setTimeout callback

            分析：
                宏队列：[宏任务1,宏任务2......]，例如：setTimeout
                微队列：[微任务1,微任务2......]，例如：Promise
                规则：每次要执行宏队列里的一个任务之前，先看微队列里是否有微任务
                    1：如果有，先执行微任务
                    2：如果没有，按照宏队列里任务的顺序，依次执行


        */


        function fn1() {
            // 是定时器的时间到了，才把任务（回调）放入宏队列找那个
            setTimeout(() => {
                console.log('setTimeout callback');
            }, 0)

            // 初始化的时候，没有把微任务（回调）放入微队列中，只有Promise状态变成成功/失败后，才放入微队列中
            Promise.resolve(1).then((value) => console.log("onResolved1", value))
            Promise.resolve(2).then((value) => console.log("onResolved1", value))
            console.log("主线程");
        }


        /* 
            // 代码二，执行顺序：

            主线程
            onResolved1 1
            onResolved1 2
            setTimeout callback1
            setTimeout callback2
        */
        function fn2() {
            setTimeout(() => {
                console.log('setTimeout callback1');
            })
            setTimeout(() => {
                console.log('setTimeout callback2');
            })
            Promise.resolve(1).then((value) => console.log("onResolved1", value))
            Promise.resolve(2).then((value) => console.log("onResolved1", value))
            console.log("主线程");
        }


        /* 
            代码三，执行顺序：

            主线程
            onResolved1 1
            onResolved2 2
            setTimeout callback1
            onResolved5 5
            setTimeout callback2
        */

        function fn3() {
            setTimeout(() => {
                console.log('setTimeout callback1');
                Promise.resolve(5).then((value) => console.log('onResolved5', value))
            })
            setTimeout(() => {
                console.log('setTimeout callback2');
            })

            Promise.resolve(1).then((value) => console.log("onResolved1", value))
            Promise.resolve(2).then((value) => console.log("onResolved2", value))
            console.log("主线程");
        }

        /* 
            代码四，执行顺序：

            3,2,5,4,1,6
        */
        function fn4() {
            setTimeout(() => {
                console.log(1);
                console.log(6);
            }, 0)

            Promise.resolve().then(() => {
                console.log(2);
                console.log(5);
            })
            Promise.resolve().then(() => {
                console.log(4);
            })
            console.log(3);
        }

        /* 
            代码五，执行顺序：
            2,5,1

            如果改成：
                console.log(2);
                resolve()
            执行顺序：
            2,5,3,4,1    
        */
        function fn5() {
            setTimeout(() => {
                console.log(1);
            }, 0)

            new Promise((resolve) => {
                console.log(2);
            }).then(
                () => console.log(3)
            )
                .then(
                    () => console.log(4)
                )

            console.log(5);
        }


        /* 
            代码六，执行顺序：
                3,7,4,1,2,5
        
        */

        function fn6() {
            const first = () => {
                return new Promise((resolve, reject) => {
                    console.log(3);
                    let p = new Promise((resolve, reject) => {
                        console.log(7);
                        setTimeout(() => {
                            console.log(5);
                            resolve(6)
                        }, 0)
                        resolve(1)
                    })
                    resolve(2)
                    p.then((arg) => {
                        console.log(arg);
                    })
                })
            }

            first().then((arg) => {
                console.log(arg);
            })
            console.log(4);
        }

        /* 
            代码七，执行顺序：
                1,7,2,3,8,4,6,5,0
        */

        function fn7() {
            setTimeout(() => {
                console.log(0);
            }, 0)

            new Promise((resolve, reject) => {
                console.log(1);
                resolve()
            }).then(() => {
                console.log(2);
                new Promise((resolve, reject) => {
                    console.log(3);
                    resolve()
                }).then(() => {
                    console.log(4);
                }).then(() => {
                    console.log(5);
                })
            }).then(() => {
                console.log(6);
            })

            new Promise((resolve,reject) =>{
                console.log(7);
                resolve()
            }).then(() =>{
                console.log(8);
            })
        }
        fn7()
    </script>
</body>

</html>